Icon 的部分我們使用 font-awesome

Install Font-awesome

yarn add @fortawesome/fontawesome-free

Icon.js

import React from 'react';
import '@fortawesome/fontawesome-free/css/all.css';
import styled from 'styled-jss';
import propTypes from 'prop-types';

const StyledIcon = styled('span')(({ theme, color, size, style }) => ({
  color,
  size,
  ...style,
}))

const Icon = ({icon, ...props}) => {
  return (
    <StyledIcon {...props}>
      <i className={`fas ${icon}`}></i>
    </StyledIcon>
  )
}

Icon.propTypes = {
  icon: propTypes.string,
  color: propTypes.string,
  size: propTypes.number,
  style: propTypes.object,
}

Icon.propTypes = {
  icon: '',
  color: '#000',
  size: 16,
  style: {},
}

export default Icon;

Usage

import React, { Fragment } from 'react';
import "./App.css";
import { ThemeProvider, Button, theme, Icon } from "./lib";

const styles = {
  button: {
    marginRight: 8
  }
}

function App() {
  return (
    <div className='App'>
      <ThemeProvider theme={theme}>
        <Fragment>
          <Icon icon='fa-user'></Icon>
          <Button type='filled' style={styles.button}>
            <Icon icon='fa-sync fa-spin'></Icon>
            Filled Button</Button>
        </Fragment>
      </ThemeProvider>
    </div>
  );
}

export default App;

也可以搭配 Button 使用，結果如下：